<template>
	<view class="container">
		<view class="form">
			<text class="title">注册</text>
			<view class="input-group">
				<input placeholder="请输入用户名" class="input" />
			</view>
			<view class="input-group">
				<input placeholder="请输入密码" type="password" class="input" />
			</view>
			<view class="input-group">
				<input placeholder="请确认密码" type="password" class="input" />
			</view>
			<button class="btn">注册</button>
			<view class="nav">
				已有账号？<navigator url="/pages/login/login">去登录</navigator>
			</view>
		</view>
	</view>
</template>


<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.form {
		width: 80%;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		display: block;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		background-color: #00b42a;
		color: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.nav {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.nav navigator {
		color: #2f5496;
		text-decoration: none;
	}
</style>